<template>
  <div>
    <el-form-item
      v-if="form.keyType === 'input'"
      :label="form.keyLabel"
      :prop="form.keyField"
    >
      <el-input
        v-model.trim="form.keyValue"
        :placeholder="form.keyRule"
      />
    </el-form-item>

    <el-form-item
      v-if="form.keyType === 'date'"
      :label="form.keyLabel"
      :prop="form.keyField"
    >
      <el-date-picker
        v-model="form.keyValue"
        :placeholder="form.keyRule"
        type="date"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
      />
    </el-form-item>

    <el-form-item
      v-if="form.keyType === 'datetime'"
      :label="form.keyLabel"
      :prop="form.keyField"
    >
      <el-date-picker
        v-model="form.keyValue"
        type="datetime"
        value-format="yyyy-MM-dd HH:mm:ss"
        format="yyyy-MM-dd HH:mm:ss"
        :placeholder="form.keyRule"
      />
    </el-form-item>

    <el-form-item
      v-if="form.keyType === 'cascader'"
      :label="form.keyLabel"
      :prop="form.keyField"
    >
      <el-cascader :configvalue="form.keyValue" @subsave="subsave"/>
    </el-form-item>

    <el-form-item
      v-if="form.keyType === 'select'"
      :label="form.keyLabel"
      :prop="form.keyField"
    >
      <el-select v-model.trim="form.keyValue" placeholder="请选择">
        <el-option
          v-for="item in form.keyRuleArr"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>

    <el-form-item
      v-if="form.keyType === 'radio'"
      :label="form.keyLabel"
      :prop="form.keyField"
    >
      <el-radio-group v-model="form.keyValue">
        <el-radio
          v-for="item in form.keyRuleArr"
          :key="item.value"
          :label="item.value"
        >
          {{ item.label }}
        </el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item
      v-if="form.keyType === 'checkbox'"
      :label="form.keyLabel"
      :prop="form.keyField"
    >
      <el-checkbox-group v-model="form.keyValue">
        <el-checkbox
          v-for="item in form.keyRuleArr"
          :key="item.value"
          :label="item.value"
        >
          {{ item.label }}
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item>

    <el-form-item
      v-if="form.keyType === 'textarea'"
      :label="form.keyLabel"
      :prop="form.keyField"
    >
      <el-input
        v-model="form.keyValue"
        type="textarea"
        w
        :placeholder="form.keyRule"
      />
    </el-form-item>
    <el-form-item
      v-if="form.keyType === 'image'"
      :label="form.keyLabel"
      :prop="form.keyField"
    >
      <image-upload :file-size="2" v-model="form.keyValue" :limit="1"/>
    </el-form-item>

    <el-form-item
      v-if="form.keyType === 'file'"
      :label="form.keyLabel"
      :prop="form.keyField"
    >
      <file-upload :file-size="2" :limit="1" v-model="form.keyValue"/>
    </el-form-item>

    <el-form-item
      v-if="form.keyType === 'editor'"
      :label="form.keyLabel"
      :prop="form.keyField"
    >
      <tinymce-editor v-model="form.keyValue" :min-height="192"
                      toolbar="undo redo | formatselect bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat"/>
    </el-form-item>
  </div>
</template>

<script>
export default {
  name: "DynamicForm",
  data() {
    return {
      form: {
        keyType: this.keyType,
        keyLabel: this.keyLabel,
        keyValue: this.keyValue,
        keyField: this.keyField,
        keyRuleArr: this.keyRuleArr,
        keyRule: this.keyRule
      }
    }
  },
  props: {
    keyType: {
      type: String,
      default: "input"// 字段表单类型
    },
    keyLabel: {
      type: String,
      default: "",// 字段表单名称
    },
    keyValue: {
      type: String,
      default: ""// 字段表单字段绑定
    },
    keyField: {
      type: String,
      default: ""// 字段表单字段名称
    },
    // 提示处理后的数组
    keyRuleArr: {
      type: Array,
    },
    // 提示
    keyRule: {
      type: String,
      default: ""
    }
  },
  watch: {
    // https://blog.csdn.net/weixin_44181180/article/details/119653080?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-2-119653080-blog-128902886.235%5Ev38%5Epc_relevant_anti_vip&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-2-119653080-blog-128902886.235%5Ev38%5Epc_relevant_anti_vip&utm_relevant_index=3
    // 子组件同步父组件
    'form.keyValue': {
      handler(newVal, oldVal) {
        this.$emit('update:keyValue', newVal)
      },
      deep: true,
      immediate: true,
    },
    // 父组件同步子组件
    keyValue: {
      handler(newVal, oldVal) {
        this.form.keyValue = newVal
      },
      deep: true,
      immediate: true,
    },
    // 父组件同步子组件
    keyType: {
      handler(newVal, oldVal) {
        this.form.keyType = newVal
      },
      deep: true,
      immediate: true,
    },
    // 父组件同步子组件
    keyLabel: {
      handler(newVal, oldVal) {
        this.form.keyLabel = newVal
      },
      deep: true,
      immediate: true,
    },
    // 父组件同步子组件
    keyField: {
      handler(newVal, oldVal) {
        this.form.keyField = newVal
      },
      deep: true,
      immediate: true,
    },
    // 父组件同步子组件
    keyRuleArr: {
      handler(newVal, oldVal) {
        this.form.keyRuleArr = newVal
      },
      deep: true,
      immediate: true,
    },
    // 父组件同步子组件
    keyRule: {
      handler(newVal, oldVal) {
        this.form.keyRule = newVal
      },
      deep: true,
      immediate: true,
    }
  }
}
</script>

<style scoped>

</style>
